<template>
	<view class="container">
		<!-- 头部区域 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<text class="page-title">数据报告</text>
		</view>

		<!-- 积分统计卡片 -->
		<view class="stats-cards">
			<view class="stats-card total-points" @click="toggleAchievementsModal">
				<view class="card-icon">🏆</view>
				<view class="card-content">
					<text class="card-title">总积分</text>
					<text class="card-value">{{ totalPoints }}</text>
					<text class="card-trend">+{{ todayPoints }} 今日</text>
				</view>
			</view>
			
			<view class="stats-card completed-tasks" @click="toggleAchievementsModal">
				<view class="card-icon">✅</view>
				<view class="card-content">
					<text class="card-title">完成任务</text>
					<text class="card-value">{{ completedTasks }}</text>
					<text class="card-trend">+{{ todayTasks }} 今日</text>
				</view>
			</view>
		</view>

		<!-- 数据概览 -->
		<view class="data-overview">
			<view class="overview-header">
				<text class="overview-title">数据概览</text>
				<view class="time-filter" @click="toggleTimeFilter">
					<text class="filter-text">{{ selectedTimeFilter }}</text>
					<text class="filter-icon" :class="{ rotated: showTimeFilter }">▼</text>
				</view>
			</view>
			
			<!-- 时间筛选下拉框 -->
			<view class="time-dropdown" v-if="showTimeFilter">
				<view 
					class="dropdown-item" 
					v-for="filter in timeFilters" 
					:key="filter.value"
					:class="{ active: selectedTimeFilter === filter.label }"
					@click="selectTimeFilter(filter)"
				>
					<text class="dropdown-text">{{ filter.label }}</text>
					<text class="dropdown-check" v-if="selectedTimeFilter === filter.label">✓</text>
				</view>
			</view>
			
			<view class="overview-grid">
				<view class="overview-item">
					<text class="item-label">环保贡献</text>
					<text class="item-value">{{ environmentalImpact }}</text>
					<text class="item-unit">kg CO₂</text>
				</view>
				<view class="overview-item">
					<text class="item-label">回收物品</text>
					<text class="item-value">{{ recycledItems }}</text>
					<text class="item-unit">件</text>
				</view>
				<view class="overview-item">
					<text class="item-label">学习时长</text>
					<text class="item-value">{{ studyHours }}</text>
					<text class="item-unit">小时</text>
				</view>
				<view class="overview-item">
					<text class="item-label">社区活动</text>
					<text class="item-value">{{ communityEvents }}</text>
					<text class="item-unit">次</text>
				</view>
			</view>
		</view>

		<!-- 趋势图表 -->
		<view class="trend-chart">
			<view class="chart-header">
				<text class="chart-title">积分趋势</text>
				<view class="chart-controls">
					<view class="chart-legend">
						<view class="legend-item">
							<view class="legend-color daily"></view>
							<text class="legend-text">每日任务</text>
						</view>
						<view class="legend-item">
							<view class="legend-color weekly"></view>
							<text class="legend-text">每周任务</text>
						</view>
					</view>
					<view class="chart-filter" @click="toggleChartFilter">
						<text class="filter-text">{{ selectedChartFilter }}</text>
						<text class="filter-icon" :class="{ rotated: showChartFilter }">▼</text>
					</view>
				</view>
			</view>
			
			<!-- 图表筛选下拉框 -->
			<view class="chart-dropdown" v-if="showChartFilter">
				<view 
					class="dropdown-item" 
					v-for="filter in chartFilters" 
					:key="filter.value"
					:class="{ active: selectedChartFilter === filter.label }"
					@click="selectChartFilter(filter)"
				>
					<text class="dropdown-text">{{ filter.label }}</text>
					<text class="dropdown-check" v-if="selectedChartFilter === filter.label">✓</text>
				</view>
			</view>
			
			<view class="chart-container">
				<view class="chart-bars">
					<view 
						class="chart-bar" 
						v-for="(day, index) in weeklyData" 
						:key="index"
						:style="{ height: day.height + '%' }"
					>
						<view class="bar-tooltip">
							<text class="tooltip-value">{{ day.points }}</text>
							<text class="tooltip-label">积分</text>
						</view>
					</view>
				</view>
				<view class="chart-labels">
					<text class="chart-label" v-for="(day, index) in weeklyData" :key="index">
						{{ day.label }}
					</text>
				</view>
			</view>
		</view>

		<!-- 成就徽章 -->
		<view class="achievements">
			<view class="achievements-header">
				<text class="achievements-title">成就徽章</text>
				<view class="achievements-controls">
					<text class="achievements-count">{{ unlockedBadges }}/{{ totalBadges }}</text>
					<view class="expand-btn" @click="toggleAchievementsExpand">
						<text class="expand-text">{{ showAllBadges ? '收起' : '展开' }}</text>
						<text class="expand-icon" :class="{ expanded: showAllBadges }">▼</text>
					</view>
				</view>
			</view>
			
			<view class="badges-grid">
				<view 
					class="badge-item" 
					v-for="badge in displayBadges" 
					:key="badge.id"
					:class="{ unlocked: badge.unlocked }"
					@click="showBadgeDetail(badge)"
				>
					<view class="badge-icon">{{ badge.icon }}</view>
					<text class="badge-name">{{ badge.name }}</text>
					<text class="badge-desc">{{ badge.description }}</text>
				</view>
			</view>
			
			<!-- 展开提示 -->
			<view class="expand-hint" v-if="!showAllBadges" @click="toggleAchievementsExpand">
				<text class="hint-text">点击展开查看全部{{ totalBadges }}个成就</text>
				<text class="hint-icon">▼</text>
			</view>
		</view>

		<!-- 详细报告列表 -->
		<view class="report-list">
			<view class="list-header">
				<text class="list-title">详细报告</text>
				<view class="list-filter" @click="toggleReportFilter">
					<text class="filter-text">{{ selectedReportFilter }}</text>
					<text class="filter-icon" :class="{ rotated: showReportFilter }">▼</text>
				</view>
			</view>
			
			<!-- 报告筛选下拉框 -->
			<view class="report-dropdown" v-if="showReportFilter">
				<view 
					class="dropdown-item" 
					v-for="filter in reportFilters" 
					:key="filter.value"
					:class="{ active: selectedReportFilter === filter.label }"
					@click="selectReportFilter(filter)"
				>
					<text class="dropdown-text">{{ filter.label }}</text>
					<text class="dropdown-check" v-if="selectedReportFilter === filter.label">✓</text>
				</view>
			</view>
			
			<view class="report-items">
				<view 
					class="report-item" 
					v-for="report in reportItems" 
					:key="report.id"
				>
					<view class="report-icon">{{ report.icon }}</view>
					<view class="report-content">
						<text class="report-title">{{ report.title }}</text>
						<text class="report-desc">{{ report.description }}</text>
						<text class="report-time">{{ report.time }}</text>
					</view>
					<view class="report-points">
						<text class="points-value">+{{ report.points }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 徽章详情弹窗 -->
		<view class="badge-detail-modal" v-if="showBadgeModal" @click="closeBadgeDetail">
			<view class="badge-detail-content" @click.stop>
				<view class="badge-detail-header">
					<text class="badge-detail-title">徽章详情</text>
					<view class="close-btn" @click="closeBadgeDetail">×</view>
				</view>
				<view class="badge-detail-body">
					<view class="badge-detail-icon" :class="{ unlocked: currentBadge.unlocked }">
						{{ currentBadge.icon }}
					</view>
					<text class="badge-detail-name">{{ currentBadge.name }}</text>
					<text class="badge-detail-desc">{{ currentBadge.description }}</text>
					<view class="badge-detail-status">
						<text class="status-text" :class="{ unlocked: currentBadge.unlocked }">
							{{ currentBadge.unlocked ? '已获得' : '未获得' }}
						</text>
						<text class="status-icon">{{ currentBadge.unlocked ? '✅' : '🔒' }}</text>
					</view>
					<view class="badge-detail-progress" v-if="currentBadge.progress">
						<text class="progress-text">进度: {{ currentBadge.progress.current }}/{{ currentBadge.progress.target }}</text>
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: (currentBadge.progress.current / currentBadge.progress.target * 100) + '%' }"></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 成就模块弹窗 -->
		<view class="achievements-modal" v-if="showAchievementsModal" @click="closeAchievementsModal">
			<view class="achievements-modal-content" @click.stop>
				<view class="achievements-modal-header">
					<text class="achievements-modal-title">成就系统</text>
					<view class="close-btn" @click="closeAchievementsModal">×</view>
				</view>
				<view class="achievements-modal-body">
					<view class="achievements-summary">
						<view class="summary-item">
							<text class="summary-label">总成就</text>
							<text class="summary-value">{{ totalBadges }}</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">已获得</text>
							<text class="summary-value unlocked">{{ unlockedBadges }}</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">完成率</text>
							<text class="summary-value">{{ Math.round(unlockedBadges / totalBadges * 100) }}%</text>
						</view>
					</view>
					
					<view class="achievements-tabs">
						<view 
							class="tab-item" 
							:class="{ active: activeTab === 'all' }"
							@click="switchTab('all')"
						>
							<text class="tab-text">全部</text>
						</view>
						<view 
							class="tab-item" 
							:class="{ active: activeTab === 'unlocked' }"
							@click="switchTab('unlocked')"
						>
							<text class="tab-text">已获得</text>
						</view>
						<view 
							class="tab-item" 
							:class="{ active: activeTab === 'locked' }"
							@click="switchTab('locked')"
						>
							<text class="tab-text">未获得</text>
						</view>
					</view>
					
					<view class="achievements-list">
						<view 
							class="achievement-item" 
							v-for="badge in filteredBadges" 
							:key="badge.id"
							:class="{ unlocked: badge.unlocked }"
							@click="showBadgeDetail(badge)"
						>
							<view class="achievement-icon">{{ badge.icon }}</view>
							<view class="achievement-info">
								<text class="achievement-name">{{ badge.name }}</text>
								<text class="achievement-desc">{{ badge.description }}</text>
								<view class="achievement-progress" v-if="badge.progress">
									<text class="progress-text">{{ badge.progress.current }}/{{ badge.progress.target }}</text>
									<view class="progress-bar">
										<view class="progress-fill" :style="{ width: (badge.progress.current / badge.progress.target * 100) + '%' }"></view>
									</view>
								</view>
							</view>
							<view class="achievement-status">
								<text class="status-icon">{{ badge.unlocked ? '✅' : '🔒' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			totalPoints: 1250,
			todayPoints: 45,
			completedTasks: 89,
			todayTasks: 3,
			environmentalImpact: 156.8,
			recycledItems: 23,
			studyHours: 12.5,
			communityEvents: 4,
			unlockedBadges: 6,
			totalBadges: 15,
			
			// 筛选器状态
			showTimeFilter: false,
			showChartFilter: false,
			showReportFilter: false,
			
			// 时间筛选器
			selectedTimeFilter: '本周',
			timeFilters: [
				{ label: '今日', value: 'today' },
				{ label: '本周', value: 'week' },
				{ label: '本月', value: 'month' },
				{ label: '本年', value: 'year' }
			],
			
			// 不同时间段的数据
			timeData: {
				today: {
					environmentalImpact: 12.5,
					recycledItems: 3,
					studyHours: 2.5,
					communityEvents: 1,
					weeklyData: [
						{ label: '今天', points: 45, height: 100 },
						{ label: '昨天', points: 38, height: 84 },
						{ label: '前天', points: 52, height: 116 },
						{ label: '3天前', points: 41, height: 91 },
						{ label: '4天前', points: 67, height: 149 },
						{ label: '5天前', points: 58, height: 129 },
						{ label: '6天前', points: 49, height: 109 }
					]
				},
				week: {
					environmentalImpact: 156.8,
					recycledItems: 23,
					studyHours: 12.5,
					communityEvents: 4,
					weeklyData: [
						{ label: '周一', points: 45, height: 75 },
						{ label: '周二', points: 38, height: 63 },
						{ label: '周三', points: 52, height: 87 },
						{ label: '周四', points: 41, height: 68 },
						{ label: '周五', points: 67, height: 100 },
						{ label: '周六', points: 58, height: 97 },
						{ label: '周日', points: 49, height: 82 }
					]
				},
				month: {
					environmentalImpact: 623.4,
					recycledItems: 89,
					studyHours: 48.2,
					communityEvents: 15,
					weeklyData: [
						{ label: '第1周', points: 156, height: 78 },
						{ label: '第2周', points: 189, height: 95 },
						{ label: '第3周', points: 234, height: 100 },
						{ label: '第4周', points: 198, height: 85 }
					]
				},
				year: {
					environmentalImpact: 2847.6,
					recycledItems: 412,
					studyHours: 218.7,
					communityEvents: 67,
					weeklyData: [
						{ label: '1月', points: 234, height: 82 },
						{ label: '2月', points: 198, height: 70 },
						{ label: '3月', points: 267, height: 94 },
						{ label: '4月', points: 289, height: 100 },
						{ label: '5月', points: 245, height: 86 },
						{ label: '6月', points: 278, height: 98 }
					]
				}
			},
			
			// 图表筛选器
			selectedChartFilter: '积分趋势',
			chartFilters: [
				{ label: '积分趋势', value: 'points' },
				{ label: '任务完成', value: 'tasks' },
				{ label: '环保贡献', value: 'environmental' }
			],
			
			// 不同图表类型的数据
			chartData: {
				points: {
					title: '积分趋势',
					unit: '积分',
					data: []
				},
				tasks: {
					title: '任务完成',
					unit: '个',
					data: []
				},
				environmental: {
					title: '环保贡献',
					unit: 'kg CO₂',
					data: []
				}
			},
			
			// 报告筛选器
			selectedReportFilter: '全部',
			reportFilters: [
				{ label: '全部', value: 'all' },
				{ label: '每日任务', value: 'daily' },
				{ label: '每周任务', value: 'weekly' },
				{ label: '成就任务', value: 'achievement' }
			],
			
			// 不同报告类型的数据
			reportData: {
				all: [],
				daily: [
					{
						id: 1,
						icon: '📦',
						title: '垃圾分类回收',
						description: '正确分类并回收塑料瓶',
						time: '今天 14:30',
						points: 15
					},
					{
						id: 2,
						icon: '💡',
						title: '节能行动',
						description: '关闭不必要的电子设备',
						time: '今天 12:00',
						points: 10
					},
					{
						id: 3,
						icon: '🚲',
						title: '绿色出行',
						description: '使用自行车代替汽车',
						time: '今天 09:15',
						points: 20
					}
				],
				weekly: [
					{
						id: 4,
						icon: '📚',
						title: '环保学习',
						description: '完成垃圾分类课程',
						time: '昨天 16:20',
						points: 25
					},
					{
						id: 5,
						icon: '🤝',
						title: '社区活动',
						description: '参与社区环保宣传',
						time: '前天 10:30',
						points: 30
					}
				],
				achievement: [
					{
						id: 6,
						icon: '🏆',
						title: '连续打卡',
						description: '连续完成7天任务',
						time: '3天前 08:00',
						points: 50
					}
				]
			},
			weeklyData: [
				{ label: '周一', points: 45, height: 75 },
				{ label: '周二', points: 38, height: 63 },
				{ label: '周三', points: 52, height: 87 },
				{ label: '周四', points: 41, height: 68 },
				{ label: '周五', points: 67, height: 100 },
				{ label: '周六', points: 58, height: 97 },
				{ label: '周日', points: 49, height: 82 }
			],
			badges: [
				{
					id: 1,
					icon: '🌱',
					name: '环保新手',
					description: '完成第一个环保任务',
					unlocked: true,
					progress: { current: 1, target: 1 }
				},
				{
					id: 2,
					icon: '♻️',
					name: '回收达人',
					description: '回收100件物品',
					unlocked: true,
					progress: { current: 100, target: 100 }
				},
				{
					id: 3,
					icon: '📚',
					name: '学习之星',
					description: '完成50小时学习',
					unlocked: true,
					progress: { current: 50, target: 50 }
				},
				{
					id: 4,
					icon: '🤝',
					name: '社区贡献者',
					description: '参与10次社区活动',
					unlocked: true,
					progress: { current: 10, target: 10 }
				},
				{
					id: 5,
					icon: '🏆',
					name: '环保大师',
					description: '连续完成100天任务',
					unlocked: false,
					progress: { current: 0, target: 100 }
				},
				{
					id: 6,
					icon: '🌍',
					name: '地球守护者',
					description: '减少1000kg碳排放',
					unlocked: false,
					progress: { current: 0, target: 1000 }
				},
				{
					id: 7,
					icon: '🚲',
					name: '绿色出行者',
					description: '使用绿色交通工具出行50次',
					unlocked: true,
					progress: { current: 50, target: 50 }
				},
				{
					id: 8,
					icon: '💡',
					name: '节能先锋',
					description: '完成100次节能行动',
					unlocked: true,
					progress: { current: 100, target: 100 }
				},
				{
					id: 9,
					icon: '🌿',
					name: '植物守护者',
					description: '种植并养护10株植物',
					unlocked: false,
					progress: { current: 3, target: 10 }
				},
				{
					id: 10,
					icon: '📱',
					name: '数字环保者',
					description: '减少电子设备使用时间100小时',
					unlocked: false,
					progress: { current: 25, target: 100 }
				},
				{
					id: 11,
					icon: '🏠',
					name: '家庭环保师',
					description: '在家中实施20项环保措施',
					unlocked: false,
					progress: { current: 8, target: 20 }
				},
				{
					id: 12,
					icon: '🎯',
					name: '目标达成者',
					description: '连续30天完成每日环保目标',
					unlocked: false,
					progress: { current: 15, target: 30 }
				},
				{
					id: 13,
					icon: '🌟',
					name: '环保传播者',
					description: '向50人传播环保理念',
					unlocked: false,
					progress: { current: 12, target: 50 }
				},
				{
					id: 14,
					icon: '🔬',
					name: '环保研究员',
					description: '完成10项环保相关研究',
					unlocked: false,
					progress: { current: 2, target: 10 }
				},
				{
					id: 15,
					icon: '🏅',
					name: '环保传奇',
					description: '获得所有其他成就徽章',
					unlocked: false,
					progress: { current: 8, target: 15 }
				}
			],
			reportItems: [
				{
					id: 1,
					icon: '📦',
					title: '垃圾分类回收',
					description: '正确分类并回收塑料瓶',
					time: '今天 14:30',
					points: 15
				},
				{
					id: 2,
					icon: '💡',
					title: '节能行动',
					description: '关闭不必要的电子设备',
					time: '今天 12:00',
					points: 10
				},
				{
					id: 3,
					icon: '🚲',
					title: '绿色出行',
					description: '使用自行车代替汽车',
					time: '今天 09:15',
					points: 20
				},
				{
					id: 4,
					icon: '📚',
					title: '环保学习',
					description: '完成垃圾分类课程',
					time: '昨天 16:20',
					points: 25
				}
			],
			// 徽章详情弹窗
			showBadgeModal: false,
			currentBadge: {},
			// 成就模块弹窗
			showAchievementsModal: false,
			activeTab: 'all',
			filteredBadges: [],
			// 展开/收起成就徽章
			showAllBadges: false,
			displayBadges: []
		}
	},
	
	mounted() {
		// 初始化数据
		this.initializeData();
	},
	
	methods: {
		// 初始化数据
		initializeData() {
			// 设置默认时间筛选器数据
			this.updateDataByTimeFilter('week');
			
			// 设置默认报告数据
			this.filterReportItems('all');
			
			// 设置默认图表数据
			this.updateChartData('points');

			// 初始化显示的徽章数量
			this.displayBadges = this.badges.slice(0, 6);
		},
		
		goBack() {
			uni.navigateBack();
		},
		
		// 时间筛选器相关方法
		toggleTimeFilter() {
			this.showTimeFilter = !this.showTimeFilter;
			// 关闭其他筛选器
			this.showChartFilter = false;
			this.showReportFilter = false;
		},
		
		selectTimeFilter(filter) {
			this.selectedTimeFilter = filter.label;
			this.showTimeFilter = false;
			this.updateDataByTimeFilter(filter.value);
		},
		
		// 图表筛选器相关方法
		toggleChartFilter() {
			this.showChartFilter = !this.showChartFilter;
			// 关闭其他筛选器
			this.showTimeFilter = false;
			this.showReportFilter = false;
		},
		
		selectChartFilter(filter) {
			this.selectedChartFilter = filter.label;
			this.showChartFilter = false;
			this.updateChartData(filter.value);
		},
		
		// 报告筛选器相关方法
		toggleReportFilter() {
			this.showReportFilter = !this.showReportFilter;
			// 关闭其他筛选器
			this.showTimeFilter = false;
			this.showChartFilter = false;
		},
		
		selectReportFilter(filter) {
			this.selectedReportFilter = filter.label;
			this.showReportFilter = false;
			this.filterReportItems(filter.value);
		},
		
		// 数据更新方法
		updateDataByTimeFilter(timeFilter) {
			// 根据时间筛选器更新数据
			console.log('更新数据，时间筛选器:', timeFilter);
			
			// 获取对应时间段的数据
			const timeData = this.timeData[timeFilter];
			if (timeData) {
				// 更新概览数据
				this.environmentalImpact = timeData.environmentalImpact;
				this.recycledItems = timeData.recycledItems;
				this.studyHours = timeData.studyHours;
				this.communityEvents = timeData.communityEvents;
				
				// 更新图表数据
				this.weeklyData = timeData.weeklyData;
				
				// 显示更新提示
				uni.showToast({
					title: `已切换到${this.selectedTimeFilter}数据`,
					icon: 'success',
					duration: 1500
				});
			}
		},
		
		updateChartData(chartType) {
			// 根据图表类型更新图表数据
			console.log('更新图表数据，类型:', chartType);
			
			// 获取当前时间筛选器的数据
			const currentTimeFilter = this.timeFilters.find(f => f.label === this.selectedTimeFilter)?.value || 'week';
			const timeData = this.timeData[currentTimeFilter];
			
			if (timeData && timeData.weeklyData) {
				// 根据图表类型生成不同的数据
				switch (chartType) {
					case 'points':
						// 积分趋势数据
						this.weeklyData = timeData.weeklyData;
						break;
					case 'tasks':
						// 任务完成数据（模拟数据）
						this.weeklyData = timeData.weeklyData.map(item => ({
							...item,
							points: Math.floor(item.points * 0.3), // 任务完成数约为积分的30%
							height: Math.floor(item.height * 0.3)
						}));
						break;
					case 'environmental':
						// 环保贡献数据（模拟数据）
						this.weeklyData = timeData.weeklyData.map(item => ({
							...item,
							points: Math.floor(item.points * 0.8), // 环保贡献约为积分的80%
							height: Math.floor(item.height * 0.8)
						}));
						break;
				}
				
				// 显示更新提示
				uni.showToast({
					title: `已切换到${this.selectedChartFilter}`,
					icon: 'success',
					duration: 1500
				});
			}
		},
		
		filterReportItems(reportType) {
			// 根据报告类型筛选报告项
			console.log('筛选报告项，类型:', reportType);
			
			// 获取对应类型的报告数据
			let filteredData = this.reportData[reportType] || [];
			
			// 如果是全部，合并所有类型的数据
			if (reportType === 'all') {
				filteredData = [
					...this.reportData.daily,
					...this.reportData.weekly,
					...this.reportData.achievement
				];
			}
			
			// 更新报告项显示
			this.reportItems = filteredData;
			
			// 显示筛选提示
			uni.showToast({
				title: `已筛选${this.selectedReportFilter}报告`,
				icon: 'success',
				duration: 1500
			});
		},

		// 徽章详情弹窗相关方法
		showBadgeDetail(badge) {
			this.currentBadge = badge;
			this.showBadgeModal = true;
		},

		closeBadgeDetail() {
			this.showBadgeModal = false;
			this.currentBadge = {};
		},

		// 成就模块弹窗相关方法
		toggleAchievementsModal() {
			this.showAchievementsModal = !this.showAchievementsModal;
			this.activeTab = 'all';
			this.filteredBadges = this.badges;
		},

		closeAchievementsModal() {
			this.showAchievementsModal = false;
		},

		switchTab(tab) {
			this.activeTab = tab;
			this.filteredBadges = this.badges.filter(badge => {
				if (tab === 'unlocked') {
					return badge.unlocked;
				} else if (tab === 'locked') {
					return !badge.unlocked;
				}
				return true; // 全部
			});
		},

		// 展开/收起成就徽章
		toggleAchievementsExpand() {
			this.showAllBadges = !this.showAllBadges;
			if (this.showAllBadges) {
				this.displayBadges = this.badges;
			} else {
				this.displayBadges = this.badges.slice(0, 6);
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f0f8ff, #e6f3ff);
	padding-bottom: 120rpx;
}

/* 头部样式 */
.header {
	display: flex;
	align-items: center;
	padding: 80rpx 30rpx 30rpx;
	background: white;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	position: relative;
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		margin-right: 30rpx;
		
		&:active {
			transform: scale(0.95);
			background: #e0e0e0;
		}
		
		.back-icon {
			font-size: 36rpx;
			color: #666;
			font-weight: bold;
		}
	}
	
	.page-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
		text-align: left;
	}
}

/* 统计卡片样式 */
.stats-cards {
	display: flex;
	gap: 20rpx;
	padding: 30rpx;
	
	.stats-card {
		flex: 1;
		background: white;
		border-radius: 20rpx;
		padding: 25rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: center;
		gap: 20rpx;
		transition: all 0.3s ease;
		cursor: pointer;
		position: relative;
		
		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		}
		
		&:active {
			transform: translateY(-2rpx);
			box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
		}
		
		&::after {
			content: '点击查看成就';
			position: absolute;
			bottom: -30rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 20rpx;
			color: #4CAF50;
			opacity: 0;
			transition: opacity 0.3s ease;
			white-space: nowrap;
		}
		
		&:hover::after {
			opacity: 1;
		}
		
		.card-icon {
			font-size: 40rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}
		
		&.total-points .card-icon {
			background: rgba(255, 193, 7, 0.1);
			color: #FFC107;
		}
		
		&.completed-tasks .card-icon {
			background: rgba(76, 175, 80, 0.1);
			color: #4CAF50;
		}
		
		.card-content {
			flex: 1;
			
			.card-title {
				font-size: 24rpx;
				color: #666;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.card-value {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 5rpx;
			}
			
			.card-trend {
				font-size: 20rpx;
				color: #4CAF50;
				display: block;
			}
		}
	}
}

/* 数据概览样式 */
.data-overview {
	background: white;
	margin: 0 30rpx 30rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	
	.overview-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;
		
		.overview-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
		
		.time-filter {
			display: flex;
			align-items: center;
			gap: 6rpx;
			padding: 6rpx 12rpx;
			background: #f8f9fa;
			border-radius: 6rpx;
			cursor: pointer;
			transition: all 0.2s ease;
			border: 1rpx solid #e0e0e0;
			
			&:hover {
				background: #e9ecef;
				border-color: #ced4da;
			}
			
			&:active {
				background: #dee2e6;
			}
			
			.filter-text {
				font-size: 22rpx;
				color: #495057;
				font-weight: 400;
			}
			
			.filter-icon {
				font-size: 16rpx;
				color: #6c757d;
				transition: transform 0.2s ease;
				
				&.rotated {
					transform: rotate(180deg);
					color: #2e7d32;
				}
			}
		}
		
		// 时间筛选下拉框样式
		.time-dropdown {
			position: absolute;
			bottom: 100%;
			right: 0;
			background: white;
			border-radius: 12rpx;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
			padding: 12rpx 0;
			z-index: 100;
			min-width: 140rpx;
			animation: slideUp 0.25s ease-out;
			border: 1rpx solid #f0f0f0;
			margin-bottom: 8rpx;
			
			.dropdown-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 20rpx;
				cursor: pointer;
				transition: all 0.2s ease;
				position: relative;
				
				&:hover {
					background: #f8f9fa;
					transform: translateX(4rpx);
				}
				
				&.active {
					background: #e8f5e8;
					color: #1b5e20;
					
					.dropdown-check {
						color: #1b5e20;
					}
				}
				
				.dropdown-text {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;
				}
				
				.dropdown-check {
					font-size: 20rpx;
					color: #4CAF50;
					font-weight: bold;
				}
			}
		}
	}
	
	.overview-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		
		.overview-item {
			text-align: center;
			padding: 20rpx;
			background: #f8f9fa;
			border-radius: 15rpx;
			
			.item-label {
				font-size: 22rpx;
				color: #666;
				display: block;
				margin-bottom: 10rpx;
			}
			
			.item-value {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 5rpx;
			}
			
			.item-unit {
				font-size: 20rpx;
				color: #999;
				display: block;
			}
		}
	}
}

/* 趋势图表样式 */
.trend-chart {
	background: white;
	margin: 0 30rpx 30rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	
	.chart-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;
		position: relative;
		
		.chart-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			flex-shrink: 0;
		}
		
		.chart-controls {
			display: flex;
			align-items: center;
			gap: 15rpx;
			flex-shrink: 0;
			
			.chart-legend {
				display: flex;
				gap: 15rpx;
				
				.legend-item {
					display: flex;
					align-items: center;
					gap: 6rpx;
					
					.legend-color {
						width: 14rpx;
						height: 14rpx;
						border-radius: 50%;
						flex-shrink: 0;
						
						&.daily {
							background: #2196F3;
						}
						
						&.weekly {
							background: #4CAF50;
						}
					}
					
					.legend-text {
						font-size: 20rpx;
						color: #666;
						white-space: nowrap;
					}
				}
			}
			
			.chart-filter {
				display: flex;
				align-items: center;
				gap: 4rpx;
				padding: 5rpx 10rpx;
				background: #f8f9fa;
				border-radius: 6rpx;
				cursor: pointer;
				transition: all 0.2s ease;
				border: 1rpx solid #e0e0e0;
				flex-shrink: 0;
				
				&:hover {
					background: #e9ecef;
					border-color: #ced4da;
				}
				
				&:active {
					background: #dee2e6;
				}
				
				.filter-text {
					font-size: 18rpx;
					color: #495057;
					font-weight: 400;
					white-space: nowrap;
				}
				
				.filter-icon {
					font-size: 12rpx;
					color: #6c757d;
					transition: transform 0.2s ease;
					flex-shrink: 0;
					
					&.rotated {
						transform: rotate(180deg);
						color: #2e7d32;
					}
				}
			}
		}
		
		// 图表筛选下拉框样式
		.chart-dropdown {
			position: absolute;
			bottom: 100%;
			right: 0;
			background: white;
			border-radius: 12rpx;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
			padding: 12rpx 0;
			z-index: 100;
			min-width: 160rpx;
			animation: slideUp 0.25s ease-out;
			border: 1rpx solid #f0f0f0;
			margin-bottom: 8rpx;
			
			.dropdown-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 20rpx;
				cursor: pointer;
				transition: all 0.2s ease;
				position: relative;
				
				&:hover {
					background: #f8f9fa;
					transform: translateX(4rpx);
				}
				
				&.active {
					background: #e8f5e8;
					color: #1b5e20;
					
					.dropdown-check {
						color: #1b5e20;
					}
				}
				
				.dropdown-text {
					font-size: 24rpx;
					color: #333;
					font-weight: 500;
				}
				
				.dropdown-check {
					font-size: 20rpx;
					color: #4CAF50;
					font-weight: bold;
				}
			}
		}
	}
	
	.chart-container {
		position: relative;
		overflow: hidden;
		
		.chart-bars {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			height: 180rpx;
			margin-bottom: 25rpx;
			padding: 0 30rpx;
			position: relative;
			
			.chart-bar {
				width: 36rpx;
				background: linear-gradient(180deg, #2196F3, #4CAF50);
				border-radius: 18rpx 18rpx 0 0;
				position: relative;
				transition: all 0.3s ease;
				max-height: 100%;
				overflow: hidden;
				
				&:hover {
					transform: scale(1.05);
					z-index: 10;
					
					.bar-tooltip {
						opacity: 1;
						transform: translateY(-8rpx);
					}
				}
				
				.bar-tooltip {
					position: absolute;
					top: -50rpx;
					left: 50%;
					transform: translateX(-50%);
					background: rgba(0, 0, 0, 0.85);
					color: white;
					padding: 6rpx 10rpx;
					border-radius: 6rpx;
					font-size: 18rpx;
					opacity: 0;
					transition: all 0.3s ease;
					white-space: nowrap;
					z-index: 20;
					pointer-events: none;
					
					.tooltip-value {
						display: block;
						font-weight: bold;
						margin-bottom: 2rpx;
						font-size: 16rpx;
					}
					
					.tooltip-label {
						display: block;
						font-size: 14rpx;
						opacity: 0.9;
					}
				}
			}
		}
		
		.chart-labels {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			position: relative;
			
			.chart-label {
				font-size: 20rpx;
				color: #666;
				text-align: center;
				width: 36rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}

/* 成就徽章样式 */
.achievements {
	background: white;
	margin: 0 30rpx 30rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	
	.achievements-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;
		
		.achievements-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
		
		.achievements-controls {
			display: flex;
			align-items: center;
			gap: 10rpx;
			background: #f8f9fa;
			border-radius: 6rpx;
			padding: 6rpx 12rpx;
			border: 1rpx solid #e0e0e0;
			
			.achievements-count {
				font-size: 24rpx;
				color: #666;
				font-weight: 400;
			}
			
			.expand-btn {
				display: flex;
				align-items: center;
				gap: 4rpx;
				cursor: pointer;
				transition: all 0.2s ease;
				
				&:active {
					transform: scale(0.95);
				}
				
				.expand-text {
					font-size: 20rpx;
					color: #4CAF50;
					font-weight: 500;
				}
				
				.expand-icon {
					font-size: 16rpx;
					color: #4CAF50;
					transition: transform 0.2s ease;
					
					&.expanded {
						transform: rotate(180deg);
					}
				}
			}
		}
	}
	
	.badges-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		transition: all 0.3s ease;
		overflow: hidden;
		
		.badge-item {
			text-align: center;
			padding: 20rpx;
			border-radius: 15rpx;
			transition: all 0.3s ease;
			cursor: pointer;
			position: relative;
			animation: fadeInUp 0.4s ease-out;
			
			&:hover {
				transform: translateY(-4rpx);
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
			}
			
			&:active {
				transform: translateY(-2rpx);
				box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.1);
			}
			
			&::after {
				content: '点击查看详情';
				position: absolute;
				bottom: -25rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 18rpx;
				color: #4CAF50;
				opacity: 0;
				transition: opacity 0.3s ease;
				white-space: nowrap;
			}
			
			&:hover::after {
				opacity: 1;
			}
			
			&.unlocked {
				background: rgba(76, 175, 80, 0.1);
				border: 2rpx solid #4CAF50;
			}
			
			&:not(.unlocked) {
				background: #f8f9fa;
				border: 2rpx solid transparent;
				opacity: 0.6;
			}
			
			.badge-icon {
				font-size: 48rpx;
				margin-bottom: 15rpx;
				display: block;
			}
			
			.badge-name {
				font-size: 24rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.badge-desc {
				font-size: 20rpx;
				color: #666;
				display: block;
				line-height: 1.4;
			}
		}
	}

	/* 展开提示样式 */
	.expand-hint {
		text-align: center;
		padding: 15rpx 0;
		background: #f8f9fa;
		border-radius: 10rpx;
		margin-top: 20rpx;
		cursor: pointer;
		transition: all 0.2s ease;
		border: 1rpx solid #e0e0e0;

		&:hover {
			background: #e9ecef;
			border-color: #ced4da;
		}

		.hint-text {
			font-size: 20rpx;
			color: #4CAF50;
			font-weight: 500;
		}

		.hint-icon {
			font-size: 16rpx;
			color: #4CAF50;
			margin-left: 5rpx;
		}
	}
}

/* 详细报告列表样式 */
.report-list {
	background: white;
	margin: 0 30rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	
	.list-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;
		
		.list-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
		}
		
		.list-filter {
			display: flex;
			align-items: center;
			gap: 6rpx;
			padding: 6rpx 12rpx;
			background: #f8f9fa;
			border-radius: 6rpx;
			cursor: pointer;
			transition: all 0.2s ease;
			border: 1rpx solid #e0e0e0;
			
			&:hover {
				background: #e9ecef;
				border-color: #ced4da;
			}
			
			&:active {
				background: #dee2e6;
			}
			
			.filter-text {
				font-size: 22rpx;
				color: #495057;
				font-weight: 400;
			}
			
			.filter-icon {
				font-size: 16rpx;
				color: #6c757d;
				transition: transform 0.2s ease;
				
				&.rotated {
					transform: rotate(180deg);
					color: #2e7d32;
				}
			}
		}
		
		// 报告筛选下拉框样式
		.report-dropdown {
			position: absolute;
			bottom: 100%;
			right: 0;
			background: white;
			border-radius: 12rpx;
			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);
			padding: 12rpx 0;
			z-index: 100;
			min-width: 160rpx;
			animation: slideUp 0.25s ease-out;
			border: 1rpx solid #f0f0f0;
			margin-bottom: 8rpx;
			
			.dropdown-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 20rpx;
				cursor: pointer;
				transition: all 0.2s ease;
				position: relative;
				
				&:hover {
					background: #f8f9fa;
					transform: translateX(4rpx);
				}
				
				&.active {
					background: #e8f5e8;
					color: #1b5e20;
					
					.dropdown-check {
						color: #1b5e20;
					}
				}
				
				.dropdown-text {
					font-size: 24rpx;
					color: #333;
					font-weight: 500;
				}
				
				.dropdown-check {
					font-size: 20rpx;
					color: #4CAF50;
					font-weight: bold;
				}
			}
		}
	}
	
	.report-items {
		.report-item {
			display: flex;
			align-items: center;
			gap: 20rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.report-icon {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background: rgba(33, 150, 243, 0.1);
				color: #2196F3;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				flex-shrink: 0;
			}
			
			.report-content {
				flex: 1;
				
				.report-title {
					font-size: 26rpx;
					font-weight: bold;
					color: #333;
					display: block;
					margin-bottom: 5rpx;
				}
				
				.report-desc {
					font-size: 22rpx;
					color: #666;
					display: block;
					margin-bottom: 5rpx;
				}
				
				.report-time {
					font-size: 20rpx;
					color: #999;
					display: block;
				}
			}
			
			.report-points {
				.points-value {
					font-size: 24rpx;
					font-weight: bold;
					color: #4CAF50;
					background: rgba(76, 175, 80, 0.1);
					padding: 8rpx 12rpx;
					border-radius: 15rpx;
				}
			}
		}
	}
}

/* 徽章详情弹窗样式 */
.badge-detail-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	
	.badge-detail-content {
		background: white;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
		width: 90%;
		max-width: 500rpx;
		max-height: 80%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		animation: slideUp 0.3s ease-out;
	}
	
	.badge-detail-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background: #f8f9fa;
		
		.badge-detail-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.close-btn {
			font-size: 40rpx;
			color: #666;
			font-weight: bold;
			padding: 10rpx;
			border-radius: 50%;
			transition: all 0.2s ease;
			
			&:active {
				background: #e0e0e0;
			}
		}
	}
	
	.badge-detail-body {
		padding: 30rpx;
		text-align: center;
		
		.badge-detail-icon {
			font-size: 100rpx;
			margin-bottom: 20rpx;
			color: #4CAF50;
			
			&.unlocked {
				color: #4CAF50;
			}
		}
		
		.badge-detail-name {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 10rpx;
		}
		
		.badge-detail-desc {
			font-size: 24rpx;
			color: #666;
			display: block;
			margin-bottom: 20rpx;
			line-height: 1.5;
		}
		
		.badge-detail-status {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
			margin-bottom: 20rpx;
			
			.status-text {
				font-size: 28rpx;
				font-weight: bold;
				color: #4CAF50;
				
				&.unlocked {
					color: #4CAF50;
				}
			}
			
			.status-icon {
				font-size: 36rpx;
			}
		}
		
		.badge-detail-progress {
			.progress-text {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 10rpx;
			}
			
			.progress-bar {
				height: 10rpx;
				background: #e0e0e0;
				border-radius: 5rpx;
				overflow: hidden;
				
				.progress-fill {
					height: 100%;
					background: linear-gradient(to right, #2196F3, #4CAF50);
					border-radius: 5rpx;
					transition: width 0.3s ease-in-out;
				}
			}
		}
	}
}

/* 成就模块弹窗样式 */
.achievements-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	
	.achievements-modal-content {
		background: white;
		border-radius: 20rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
		width: 95%;
		max-width: 700rpx;
		max-height: 95%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		animation: slideUp 0.3s ease-out;
	}
	
	.achievements-modal-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background: #f8f9fa;
		flex-shrink: 0;
		
		.achievements-modal-title {
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
		}
		
		.close-btn {
			font-size: 44rpx;
			color: #666;
			font-weight: bold;
			padding: 12rpx;
			border-radius: 50%;
			transition: all 0.2s ease;
			
			&:active {
				background: #e0e0e0;
			}
		}
	}
	
	.achievements-modal-body {
		padding: 30rpx;
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	
	.achievements-summary {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
		margin-bottom: 30rpx;
		
		.summary-item {
			text-align: center;
			
			.summary-label {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 8rpx;
			}
			
			.summary-value {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				
				&.unlocked {
					color: #4CAF50;
				}
			}
		}
	}
	
	.achievements-tabs {
		display: flex;
		gap: 20rpx;
		margin-bottom: 30rpx;
		
		.tab-item {
			flex: 1;
			text-align: center;
			padding: 15rpx 0;
			background: #f8f9fa;
			border-radius: 15rpx;
			border: 1rpx solid #e0e0e0;
			cursor: pointer;
			transition: all 0.2s ease;
			
			&:active {
				background: #e9ecef;
				border-color: #ced4da;
			}
			
			&.active {
				background: #e8f5e8;
				color: #1b5e20;
				border-color: #4CAF50;
			}
			
			.tab-text {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}
	
	.achievements-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 15rpx;
		max-height: 600rpx;
		overflow-y: auto;
		padding-right: 10rpx;
		
		&::-webkit-scrollbar {
			width: 6rpx;
		}
		
		&::-webkit-scrollbar-track {
			background: #f1f1f1;
			border-radius: 3rpx;
		}
		
		&::-webkit-scrollbar-thumb {
			background: #c1c1c1;
			border-radius: 3rpx;
			
			&:hover {
				background: #a8a8a8;
			}
		}
		
		.achievement-item {
			display: flex;
			align-items: center;
			gap: 15rpx;
			padding: 15rpx;
			border-radius: 12rpx;
			background: #f8f9fa;
			border: 1rpx solid transparent;
			transition: all 0.2s ease;
			cursor: pointer;
			
			&:hover {
				background: #e9ecef;
				border-color: #ced4da;
				transform: translateY(-2rpx);
			}
			
			&.unlocked {
				background: rgba(76, 175, 80, 0.1);
				border-color: #4CAF50;
			}
			
			.achievement-icon {
				font-size: 36rpx;
				color: #4CAF50;
				flex-shrink: 0;
			}
			
			.achievement-info {
				flex: 1;
				min-width: 0;
				
				.achievement-name {
					font-size: 24rpx;
					font-weight: bold;
					color: #333;
					display: block;
					margin-bottom: 6rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
				.achievement-desc {
					font-size: 20rpx;
					color: #666;
					display: block;
					margin-bottom: 8rpx;
					line-height: 1.3;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				
				.achievement-progress {
					.progress-text {
						font-size: 18rpx;
						color: #666;
						margin-bottom: 6rpx;
					}
					
					.progress-bar {
						height: 6rpx;
						background: #e0e0e0;
						border-radius: 3rpx;
						overflow: hidden;
						
						.progress-fill {
							height: 100%;
							background: linear-gradient(to right, #2196F3, #4CAF50);
							border-radius: 3rpx;
							transition: width 0.3s ease-in-out;
						}
					}
				}
			}
			
			.achievement-status {
				.status-icon {
					font-size: 28rpx;
					color: #4CAF50;
					flex-shrink: 0;
				}
			}
		}
	}
}

/* 动画关键帧 */
@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(10rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.header {
		padding: 60rpx 20rpx 25rpx;
		
		.back-btn {
			margin-right: 20rpx;
		}
		
		.page-title {
			font-size: 32rpx;
		}
	}
	
	.stats-cards {
		padding: 20rpx;
		flex-direction: column;
		
		.stats-card {
			padding: 20rpx;
		}
	}
	
	.data-overview,
	.trend-chart,
	.achievements,
	.report-list {
		margin: 0 20rpx 20rpx;
		padding: 25rpx;
	}
	
	.overview-grid {
		grid-template-columns: 1fr;
	}
	
	.badges-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.chart-controls {
		flex-direction: column;
		gap: 12rpx;
		align-items: flex-start;
		
		.chart-legend {
			gap: 12rpx;
			
			.legend-item {
				gap: 4rpx;
				
				.legend-text {
					font-size: 18rpx;
				}
			}
		}
	}
	
	.chart-container {
		.chart-bars {
			height: 150rpx;
			padding: 0 20rpx;
			
			.chart-bar {
				width: 32rpx;
				border-radius: 16rpx 16rpx 0 0;
			}
		}
		
		.chart-labels {
			padding: 0 20rpx;
			
			.chart-label {
				width: 32rpx;
				font-size: 18rpx;
			}
		}
	}

	.achievements-controls {
		flex-direction: column;
		align-items: flex-start;
		gap: 8rpx;
	}

	.expand-hint {
		width: 100%;
		text-align: center;
		padding: 10rpx 0;
	}
	
	.time-dropdown,
	.chart-dropdown,
	.report-dropdown {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		margin-top: 15rpx;
	}
}
</style>
